<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar
      left-text="取消"
      right-text="确定"
      title="设置昵称"
      @click-left="$emit('close')"
      @click-right="submit"
    />
    <!-- 输入框区域 -->
    <div class="input">
      <van-field
        type="textarea"
        v-model="message"
        maxlength="7"
        show-word-limit
      />
    </div>
  </div>
</template>
<script>
import { updateUserProfile } from "@/api/user";
export default {
  data() {
    return {
      message: this.name
    };
  },
  props: {
    name: String
  },
  methods: {
    async submit() {
      if (!this.message) return this.$toast.fail("请输入昵称");
      try {
        let { data: res } = await updateUserProfile({
          name: this.message
        });

        this.$emit("close", res.data.name);
      } catch (error) {
        if (error.response.state === 409) return this.$toast.fail("昵称被占用");
        this.$toast.fail("更新用户昵称失败");
      }
    }
  }
};
</script>
<style lang="less" scoped>
.edit-name {
  background-color: #f4f5f6;
  height: 100vh;
}
.input {
  margin: 30px;
}
</style>
